<template>
	<view>
		<cu-custom bgColor="bg-white" :isBack="false" >
			<block slot="content">个人中心</block>
		</cu-custom>
		<view class="head">
			<!-- #ifdef MP-WEIXIN -->
			<block v-if="hasLogin">
				<view class="userinfo" >
					<u-avatar :src="user.avatar|| 'https://hys-online.oss-cn-guangzhou.aliyuncs.com/hyz/icon/images/userpic.png'" @click="toUcenter"></u-avatar>
					<view class="username">
						<text>{{nickname}}</text>
						<text class="sub-txt">{{ user.area }}</text>
					</view>
					<view class="arrow-right flex ">
						<text class="iconfont font-md mx-3" style="padding-top: 7rpx;" @click="openCode">&#xe7ad;</text>
						<q-icon  name="q-arrow-right" @click="toUcenter"></q-icon>
					</view>	
				</view>
			</block>
			<!-- #endif -->
				<!-- #ifdef H5 -->
			<block v-if="H5login">
				<view class="userinfo" >
					<u-avatar :src="user.avatar|| 'https://hys-online.oss-cn-guangzhou.aliyuncs.com/hyz/icon/images/userpic.png'" @click="toUcenter"></u-avatar>
					<view class="username">
						<text>{{nickname}}</text>
						<text class="sub-txt">{{ user.area }}</text>
					</view>
					<view class="arrow-right flex ">
						<text class="iconfont font-md mx-3" style="padding-top: 7rpx;" @click="openCode">&#xe7ad;</text>
						<q-icon  name="q-arrow-right" @click="toUcenter"></q-icon>
					</view>	
				</view>
			</block>
			<!-- #endif -->
			<view class="btn-login" v-if="!hasLogin">
				<u-button type="default" shape="circle" @click="toLogin" plain>登录</u-button>
			</view>
			<!-- #ifdef H5 -->
			<view class="btn-login" v-if="!H5login">
				<u-button type="default" shape="circle" @click="toLogin" plain>登录</u-button>
			</view>
			<!-- #endif -->
				
			<u-grid :col="4" :border="false" style="margin: 20rpx 0;" @click="toNav">
				<u-grid-item index="/pages/my/fans">
					<text class="pl-2">{{ info.fenCount }}</text>
					<view class="grid-text">粉丝</view>
				</u-grid-item>
				<u-grid-item index="/pages/my/follow">
					<text class="pl-2">{{ info.followCount }}</text>
					<view class="grid-text">关注</view>
				</u-grid-item>
				<u-grid-item index="/pages/my/post?key=moment">
					<text class="pl-2">{{ info.momentCount }}</text>
					<view class="grid-text">动态</view>
				</u-grid-item>
			</u-grid>
		</view>
		<!-- 我的服务 -->
		<view class="block-wrap">
			<view class="cu-list menu shadow-shop bg-white text-black my-radius sm-border">
				<view class="cu-item " @click="GotomyCircle">
					<button class='content cu-btn'>
						<image class="gn-icon" :src=" imgUrl + '/images/icon-haoyou.png'"></image>
						<text class='grid-text'>好友圈</text>
						
						<view style="margin-left: 420rpx;" >
							<view class="position-relative" v-if="!notice.num && notice.user_id">
								<free-avater 
								:src="notice.avatar || 'https://hys-online.oss-cn-guangzhou.aliyuncs.com/hyz/icon/images/userpic.png'" 
								size="55"></free-avater>
								<text class="rounded-circle bg-danger position-absolute" style="width: 20rpx;height: 20rpx;top: 0;right: 0;"></text>
							</view>
							<free-badge v-if="notice.num" :value="notice.num"></free-badge>
						</view>
					</button>
				</view>
				
				<view class="cu-item " @click="GotomyFava">
					<button class='content cu-btn'>
						<image class="gn-icon" :src=" imgUrl + '/images/icon/fava.png'"></image>
						<text class='grid-text'>我的收藏</text>
					</button>
				</view>
				<view class="cu-item " @click="open('my/thumb?key=moment')">
					<button class='content cu-btn'>
						<image class="gn-icon" :src="imgUrl + '/images/posts.png'"></image>
						<text class='grid-text'>我的动态</text>
					</button>
				</view>
				<view class="cu-item " @click="Gotomyworks">
					<button class='content cu-btn'>
						<image class="gn-icon" :src=" imgUrl + '/tabbar/works-nor.png'"></image>
						<text class='grid-text'>我的作品</text>
						
						<view style="margin-left: 390rpx;" class="text-muted font">
							{{videoCount}} <text  class="iconfont icon-youjiantou ml-1 text-light-muted"></text>
						</view>
					</button>
				</view>
				<view class="cu-item " @click="Gotohistory">
					<button class='content cu-btn'>
						<image class="gn-icon" :src=" imgUrl + '/images/history.png'"></image>
						<text class='grid-text'>观看历史记录</text>
					</button>
				</view>		
			</view>
				
		</view>
		<view class="block-wrap">
			<view class="cu-list menu shadow-shop bg-white text-black my-radius sm-border">
				<!-- 音乐广场 -->
				<view class="cu-item " @click="GotomusicCircle">
					<button class='content cu-btn'>
						<image class="gn-icon" style="margin-bottom: unset;" 
							:src=" imgUrl + '/images/musicCicle.png'">
						</image>
						<text class='grid-text'>音乐广场</text>
					</button>
				</view>
				<!-- 我的音乐播放 -->
				<view class="cu-item " @click="GotomusicList">
					<button class='content cu-btn'>
						<image class="gn-icon" style="margin-bottom: unset;" 
							:src="imgUrl + '/images/musicList.png'">
						</image>
						<text class='grid-text'>我的音乐播放</text>
					</button>
				</view>
				<!--  帮助与反馈 -->
				<view class="cu-item " @click="GotomyContactHelp">
					<button class='content cu-btn' open-type="contact">
						<image class="gn-icon" style="margin-bottom: unset;" 
							:src="imgUrl + '/images/chucuo.png'">
						</image>
						<text class='grid-text'>帮助与反馈</text>
					</button>
				</view>
				<!-- 分享小程序 -->
				<view class="cu-item ">
					<button class='content cu-btn' open-type="share">
						<image class="gn-icon" style="margin-bottom: unset;" 
							:src="imgUrl + '/images/lvhang.png'" mode='aspectFit'>
						</image>
						<text class='grid-text'>分享小程序</text>
					</button>
				</view>
			</view>				
		</view>
		<!-- tabbar -->
		<!-- <q-tabbar :active="4" :count="msgCount"></q-tabbar> -->
	</view>
</template>

<script>
import { checkLogin } from '@/utils/wxConfig.js'
import freeListItem from "@/components/free-ui/free-list-item.vue"
import freeAvater from "@/components/free-ui/free-avater.vue"
import freeBadge from '@/components/free-ui/free-badge.vue'
import $U from '@/common/free-lib/util.js'
import { mapState } from 'vuex'
export default {
	components: {
		freeListItem,
		freeAvater,
		freeBadge
	},
	data() {
		return {
			imgUrl:this.$site.img_url,
			info:'',
			videoCount:'',
			hasLogin:uni.getStorageInfoSync('hasLogin'),
			// #ifdef H5
			H5login:window.sessionStorage.getItem('hasLogin')
			// #endif
			
		};
	},
	computed:{
		// msgCount(){
		// 	return this.$store.state.messegeNum
		// }
		...mapState({
			user:state=>state.user.user,
			notice:state=>state.user.notice,
			chat:state=>state.user.chat
		}),
		nickname(){
			return this.user.nickname ? this.user.nickname : this.user.username
		}
	},
	onLoad() {
		//#ifdef MP-WEIXIN
		wx.showShareMenu({
			withShareTicket: true,
			menus: ['shareAppMessage', 'shareTimeline']
		});
		//#endif
		
		if (!checkLogin()) return
		this.getTobNum()
		this.$C.get('/user/statistics',{
			token:true,
			noJump:true,
			toast:false
		}).then(res=>{
			this.followCount = res.followCount
			this.videoCount = res.videoCount
		})
	},
	onShow() {
		if (uni.getStorageSync('hasLogin')) {
			// this.getUserInfo();
			this.hasLogin = true;
		} else {
			this.hasLogin = false;
		} 
		if (!checkLogin()) return
		this.$C.get('/user/statistics',{
			token:true,
			noJump:true,
			toast:false
		}).then(res=>{
			this.followCount = res.followCount
			this.videoCount = res.videoCount
		})
		// this.getMsgNum();
	},
	onShareAppMessage(res) {
		if (res.from === 'button') {
			// 来自页面内分享按钮
			console.log(res.target);
		}
		let imgURL = 'https://oss.ymeoo.cn/logo.png';
		return {
			title: this.$c.miniappName,
			path: '/pages/index/index',
			imageUrl: imgURL
		};
	},
	methods: {
		// 我的二维码
		openCode(){
			uni.navigateTo({
				url: '../user/edit-info/code?params='+encodeURIComponent(JSON.stringify({
					id:this.user.id,
					name:this.user.nickname || this.user.username,
					avatar:this.user.avatar,
					area:this.user.area
				}))+'&type=user',
			});
		},
		 //我的收藏
		GotomyFava(){
			if (!checkLogin()) return
			uni.navigateTo({
				url:'fava'
			})
		},
		//好友圈
		GotomyCircle(){
			if (!checkLogin()) return
			uni.navigateTo({
				url:'/pages/my/friend-moment'
			})
			this.chat.readMoments()
		},
		//我的动态
		open(path){
			if (!checkLogin()) return
			uni.navigateTo({
				url: '/pages/'+path
			});
		},
		//我的帖子
		GotomyPosts(){
			uni.navigateTo({
				url:'post'
			})
		},
		//我的作品
		Gotomyworks(){
			if (!checkLogin()) return
			uni.navigateTo({
				url:'user-video/user-video'
			})
		},
		//观看历史记录
		Gotohistory(){
			if (!checkLogin()) return
			uni.navigateTo({
				url:'user-history/user-history'
			})
		},
		//点赞的帖子
		GotomyPosts(){
			if (!checkLogin()) return
			uni.navigateTo({
				url:'thumb'
			})
		},
		//音乐广场
		GotomusicCircle(){
			uni.navigateTo({
				url:'../more/songList/songList'
			})
		},
		//我的音乐播放
		GotomusicList(){
			uni.navigateTo({
				url:'../play/MyplayList'
			})
		},
		//帮助和反馈
		GotomylikesPosts(){
			uni.navigateTo({
				url:'post'
			})
		},
		//统计数据
		getTobNum(){
			return new Promise((result,reject)=>{
				this.$C.get('/user/statistics').then(res=>{
					this.info = res
					result(res)
				})
			})
		},
		jumpPhoneLogin() {
			uni.navigateTo({
				url: '/pages/user/sms-login'
			});
		},
		//登录页
		toLogin() {
			uni.navigateTo({
				url: '/pages/user/login'
			});
		},
		//个人信息修改
		toUcenter() {
			uni.navigateTo({
				url: '/pages/user/edit-info/edit'
			});
		},
		toNav(url) {
			uni.navigateTo({
				url: url
			});
		}
	}
};
</script>

<style>
page {
	background-color: #f5f5f5;
}
</style>
<style lang="scss" scoped>
.head {
	padding: 20rpx;
	background-color: #fff;
	.sub-txt {
		font-size: 24rpx;
		color: #616161;
		display: block;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 1;
		overflow: hidden;
	}
	margin-bottom: 20rpx;
}

.userinfo {
	display: flex;
	align-items: center;
	padding: 20rpx;
}

.userinfo .username {
	display: flex;
	flex-direction: column;
}

.grid-text {
	color: #000000;
	font-size: 28rpx;
	margin-left: 30rpx;
	// margin-bottom: 20rpx;
}

.userinfo u-avatar {
	margin-right: 20rpx;
}

.userinfo .arrow-right {
	margin-left: auto;
}

.btn-login {
	margin: 40rpx 0;
}

.gn-icon {
	width: 60rpx;
	height: 60rpx;
	// margin-bottom: 20rpx;
}

/*服务按钮*/
.btn-wrap {
	display: flex;
	margin-top: 30rpx;
}

.btn-wrap .btn-contact {
	background-color: #fff;
	margin-left: 15rpx;
	margin-right: 15rpx;
	padding: 20rpx;
	line-height: unset;
	font-size: 12px;
	color: #999;
}

.btn-wrap .btn-contact:active {
	background-color: #f5f5f5;
}

.btn-wrap .btn-contact .txt {
	margin-top: 20rpx;
}

.btn-wrap .btn-contact::after {
	border: unset;
	position: unset;
}

.icon-size {
	font-size: 50rpx;
}

.block-wrap {
	background-color: #fff;
	border-radius: 20rpx;
	margin: 20rpx;
	overflow: hidden;
	.block-title {
		background-color: #fff;
		padding: 20rpx;
	}
}

</style>
